<template>
    <view class="home">
        <view class="item it_flex" @click="yiji()">
            <view class="it_left">选择分类</view>
            <view class="it_right">
                <text>{{ yijiName ? yijiName : "请选择分类" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item it_flex" @click="brandClick()">
            <view class="it_left">选择品牌</view>
            <view class="it_right">
                <text>{{ brandName ? brandName : "请选择品牌" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item it_flex">
            <view class="it_left">商品名称</view>
            <input type="text" placeholder="请输入商品名称" v-model="title" />
        </view>
        <view class="item it_flex">
            <view class="it_left">商品详情</view>
            <input type="text" placeholder="请输入商品详情" v-model="content" />
        </view>
        <view class="item it_flex" @click="getClassCate">
            <view class="it_left">商户内分类</view>
            <view class="it_right">
                <text>{{ fenleiName ? fenleiName : "请选择商户内分类" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item it_flex" @click="getFreight" v-if="distributionId != 2">
            <view class="it_left">运费模版</view>
            <view class="it_right">
                <text>{{ postagename ? postagename : "请选择是否包邮" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item it_flex" @click="getType">
            <view class="it_left">商品配送类型</view>
            <view class="it_right">
                <text>{{ distributionName ? distributionName : "请选择商品配送类型" }}</text>
                <text class="wlIcon-fanhui2"></text>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品封面</view>
            <view class="u-flex u-flex-wrap it_right">
                <view class="it_rig_img" style="position: relative" v-if="imgs">
                    <image class="it_rig_img" mode="aspectFill" :src="imgs"></image>
                </view>
                <view class="it_rig_box" @click="uplistImg">+</view>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left" style="margin-bottom: 30rpx">上传商品图片</view>
            <view class="u-flex u-flex-wrap it_right">
                <block v-if="imgUpLoad">
                    <view class="it_rig_img" style="position: relative" v-for="img in imgUpLoad" :key="img">
                        <image class="it_rig_img" mode="aspectFill" :src="img"></image>
                    </view>
                </block>
                <view class="it_rig_box" @click="upshopImg">+</view>
            </view>
        </view>
        <!-- 多规格 -->
        <view class="item item_pad_bot" v-for="(item, index) in skuList" :key="index">
            <view class="it_tit">
                <view class="it_left">{{ item.title }}</view>
                <view class="u-flex it_grey" @click="skuDel(index)">
                    <!-- <image :src="BaseUrl + '/static/wImg/delete.png'"></image> -->
                    删除
                </view>
            </view>
            <view class="u-flex u-flex-wrap">
                <view class="it_specs" v-for="(items, indexs) in item.skuitem" :key="indexs">
                    <input type="text" v-model="items.name" confirm-type="done" @blur="iptitSpec(indexs)"
                        @confirm="iptitSpec(indexs)" />
                    <!-- <image class="it_sp_line" :src="BaseUrl + '/static/wImg/line.png'"></image> -->
                    <!-- <image
                        class="it_sp_cha"
                        :src="BaseUrl + '/static/wImg/cha.png'"
                        @click="delSpec(indexs, item.skuitem)"
                    ></image> -->
                </view>
                <view class="it_specs">
                    <!-- <image class="it_sp_plus" :src="BaseUrl + '/static/wImg/smaPlus.png'"></image> -->
                    <view class="it_sp_gre" @click="addSpec(item.skuitem, index)">添加新规格</view>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot" v-if="is_add_show">
            <view class="it_tit">
                <input type="text" placeholder="请输入规格类型" confirm-type="done" @blur="iptNewspec" @confirm="iptNewspec"
                    v-model="newSpec" />
                <view class="u-flex it_grey" @click="delAdd()">
                    <!-- <image :src="BaseUrl + '/static/wImg/delete.png'"></image> -->
                    删除
                </view>
            </view>
            <view class="u-flex u-flex-wrap">
                <view class="it_specs">
                    <!-- <image class="it_sp_plus" :src="BaseUrl + '/static/wImg/smaPlus.png'"></image> -->
                    <view class="it_sp_gre">添加新规格</view>
                </view>
            </view>
        </view>
        <view class="item item_pad_bot">
            <view class="it_left">价格</view>
            <view class="it_right_duo" v-for="(item, index) in PricList" :key="index">
                <view class="u-flex u-flex-wrap" style="margin-top: 20rpx">
                    <view class="it_pri" v-for="(items, indexs) in item.temp" :key="indexs">{{ items }}</view>
                </view>
                <view class="u-flex u-row-between it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">商品价格</view>
                        <input type="digit" placeholder="请输入价格" v-model="item.price" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">设置库存</view>
                        <input type="number" placeholder="请输入库存" v-model="item.kuc" />
                    </view>
                </view>
                <view class="u-flex u-row-between it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">商品重量</view>
                        <input type="digit" placeholder="请输入重量" v-model="item.weigh" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">划线价格</view>
                        <input type="digit" placeholder="请输入划线价格" v-model="item.market_price" />
                    </view>
                </view>
                <view class="u-flex u-row-between it_rig_line">
                    <view class="it_ban u-flex">
                        <view class="it_left">奖励积分</view>
                        <input type="digit" placeholder="请输入奖励积分" v-model="item.score" />
                    </view>
                    <view class="it_ban u-flex">
                        <view class="it_left">商品编码</view>
                        <input type="digit" placeholder="请输入商品编码" v-model="item.sn" />
                    </view>
                </view>
            </view>
        </view>
        <view class="add u-flex-center" style="text-align: center; line-height: 60rpx" @click="is_add_show = true">新增规格
        </view>
        <view style="height: 60rpx"></view>
        <!-- 发布 -->
        <view class="add1 btn u-flex-center" style="text-align: center; line-height: 80rpx" @click="getSubmit()">确认发布
        </view>
        <view style="height: 30rpx"></view>
        <!-- 选择分类 -->
        <uv-picker keyName="name" ref="is_cate_show" @confirm="confirmIt" :columns="selector"
            @change="changeClass"></uv-picker>
        <!-- 运费模板 -->
        <uv-picker keyName="name" ref="is_yunfei_show" @confirm="getPostage" :columns="postagelist"></uv-picker>
        <!-- 商户内分类 -->
        <uv-picker keyName="name" ref="showFenLei" @change="changeCate" @confirm="confirmFenLei"
            :columns="fenleiList"></uv-picker>
        <!-- 配送类型 -->
        <uv-picker keyName="name" ref="is_distribution_show" @confirm="confirmType"
            :columns="distributionList"></uv-picker>
        <!-- 品牌 -->
        <uv-picker keyName="name" ref="is_brand_show" @confirm="confirmBrand" :columns="brandList"></uv-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            is_cate_show: false, //是否显示一级分类
            selector: [], //分类
            claCgildList: [], //分类下的子分类
            classChildList1: [], //子分类下的子分离
            yijiName: "", //一级分类
            yijiId: null, //一级分类id

            is_brand_show: false,//是否显示品牌
            brandName: "", //品牌
            brandId: null,//品牌id
            brandList: [],//品牌列表

            is_add_show: false, //是否显示新增规格
            skuList: [],
            newSpec: "",
            PricList: [],

            is_yunfei_show: false, //是否显示运费模板
            postagelist: [], //运费模板
            postageid: "",
            postagename: "",

            is_distribution_show: false, //是否显示配送类型
            distributionList: [
                [
                    { name: "快递", id: 1 },
                    { name: "自提", id: 2 },
                    { name: "物流+自提", id: 3 },
                ],
            ], //配送类型
            distributionId: null, //配送类型id
            distributionName: "", //配送类型

            title: "", //标题

            imgs: "", //封面
            image: "", //图片
            imgUpLoad: [], //页面展示图片路径
            imagesUp: [], //传走的图片路径

            showFenLei: false, //是否显示商户内分类
            fenleiList: [], //店铺内分类--一级
            fenleiCgildList: [], //店铺内分类--二级
            fenleiChildList1: [], //店铺内分类--三级
            fenleiName: "", //店铺内分类标题
            fenleiId: null, //店铺内分类id

            content: "", //详情

            id: 0,
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.getchaxun(this.id);
        this.getcatelist1(); // 获取一级分类
        this.getcatelists(); // 获取商户内分类
        this.postage(); //运费模板
        this.getBrandList();
        if (this.$store.state.common.appConfig.logistics_delivery == 'N') {
            this.distributionList[0] = [
                { name: "仅自提", id: 2 },
            ]
        }
    },
    onShow() { },

    methods: {
        /* 根据id查询我的产品的详情*/
        async getchaxun(id) {
            const res = await uni.request({
                url: "/shop.shop/GetGoodsDetailis",
                method: "POST",
                data: {
                    ids: id,
                },
                success: (res) => {
                    this.title = res.data.title; //商品名称-显示
                    this.image = res.data.image; //商品图片-显示
                    this.content = res.data.content; //商品详情-显示
                    this.yijiName = res.data.category_name; //一级分类
                    this.yijiId = res.data.category_id; //一级分类的id
                    this.postageid = res.data.freight_id; //商品配送类型
                    this.postagename = this.postagelist
                        .find((ele) => ele.find((item) => this.postageid == item.id))
                        ?.find((item) => this.postageid == item.id)?.name;
                    res.data.images.forEach((item) => {
                        this.imgUpLoad.push(this.$imgUrl + item);
                    });
                    this.imagesUp = res.data.images; //页面展示图片路径
                    this.skuList = res.data.spu; //规格
                    this.PricList = res.data.sku; //价格
                    this.fenleiId = res.data.shop_category_id; //商户内分类
                    this.fenleiName = this.fenleiList
                        .find((ele) => ele.find((item) => this.fenleiId == item.id))
                        ?.find((item) => this.fenleiId == item.id)?.name;
                    this.imgs = res.data.image;
                    this.brandId = res.data.brand_id
                    this.brandName = this.brandList
                        .find((ele) => ele.find((item) => this.brandId == item.id))
                        ?.find((item) => this.brandId == item.id)?.name;

                    this.distributionId = res.data.delivery_type
                    this.distributionName = res.data.delivery_type == 1 ? '快递' : res.data.delivery_type == 2 ? '自提' : res.data.delivery_type == 3 ? '物流+自提' : '';
                },
            });
        },
        //获取品牌
        async getBrandList() {
            await uni.request({
                url: "/shop.shop/GetBrandList",
                method: "POST",
                success: (res) => {
                    this.brandList = [res.res.data];
                },
            })
        },
        //点击打开品牌列表
        brandClick() {
            this.$refs.is_brand_show.open();
        },
        //确认选择品牌
        confirmBrand(e) {
            this.brandName = e.value[0].name;
            this.brandId = e.value[0].id;
        },
        // 获取商户内分类
        async getcatelists() {
            await uni.request({
                url: "/shop.shop/get_shop_goods_category",
                method: "POST",
                success: (res) => {
                    this.fenleiList = [res.res.data];
                    res.res.data.map((item) => {
                        this.fenleiCgildList.push(item.children);
                    });
                    this.fenleiCgildList.map((item2) => {
                        this.fenleiChildList1.push(item2.children);
                    });
                },
            });
        },
        //打开配送类型
        getType() {
            this.$refs.is_distribution_show.open();
        },
        // 配送类型选择
        confirmType(e) {
            this.distributionId = e.value[0].id;
            this.distributionName = e.value[0].name;
            if (this.distributionId == 2) {
                this.postageid = null
                this.postageName = ''
            }
        },
        //打开商户内分类
        getClassCate() {
            this.$refs.showFenLei.open();
        },
        //选择点剖分类
        changeCate(e) {
            const { columnIndex, index } = e;
            if (columnIndex === 0) {
                this.$refs.showFenLei.setColumnValues(1, this.claCgildList[index]);
            } else {
                this.$refs.showFenLei.setColumnValues(2, this.classChildList1[index]);
            }
        },
        // 确认商户内分类
        confirmFenLei(e) {
            this.fenleiName = `${e.value[0]?.name} ${e.value[1]?.name ?? ""} ${e.value[2]?.name ?? ""}`;
            this.fenleiId = e.value[2]?.id || e.value[1]?.id || e.value[0]?.id;
        },
        //旧的
        yiji() {
            this.$refs.is_cate_show.open();
            this.selector = this.catelist1;
        },
        // 获取分类
        async getcatelist1() {
            await uni.request({
                url: "/shop.shop/get_goods_category",
                method: "POST",
                success: (res) => {
                    this.catelist1 = [res.res.data];
                    this.selector = this.catelist1;
                    res.res.data.map((item) => {
                        this.claCgildList.push(item.children);
                    });
                    this.claCgildList.map((item2) => {
                        this.classChildList1.push(item2.children);
                    });
                },
            });
        },
        // 选择分类
        changeClass(e) {
            const { columnIndex, index } = e;
            if (columnIndex === 0) {
                this.$refs.is_cate_show.setColumnValues(1, this.claCgildList[index]);
            } else {
                this.$refs.is_cate_show.setColumnValues(2, this.classChildList1[index]);
            }
        },
        // 一级分类
        confirmIt(e) {
            this.yijiName = `${e.value[0]?.name} ${e.value[1]?.name ?? ""} ${e.value[2]?.name ?? ""}`;
            this.yijiId = e.value[2]?.id || e.value[1]?.id || e.value[0]?.id;
        },
        //打开运费模版
        getFreight() {
            this.$refs.is_yunfei_show.open();
        },
        //运费模板
        async postage() {
            await uni.request({
                url: "/shop.shop/get_logistics_list",
                success: (res) => {
                    this.postagelist = [res.res.data.data];
                },
            });
        },
        // 运费模板选择
        getPostage(e) {
            this.postageid = e.value[0].id;
            this.postagename = e.value[0].name;
        },
        //删除
        delAdd() {
            this.newSpec = "";
            this.is_add_show = false;
        },
        // 添加新规格
        iptNewspec(e) {
            var arr = {
                title: "",
                skuitem: [],
            };
            arr.title = e.detail.value;
            this.skuList.push(arr);
            this.newSpec = "";
            this.is_add_show = false;
        },
        // 删除规格
        skuDel(index) {
            var dellist = this.skuList;
            dellist.splice(index, 1);
            this.PricList = []; //7加（去掉大规格，下面小规格一起删掉）
        },
        //规格名
        iptitSpec(indexs) {
            this.getPricelist();
        },
        //添加规格名
        addSpec(skuitem, index) {
            var arr = {
                name: "",
            };
            var newskuitm = skuitem;
            newskuitm.push(arr);
            for (let i = 0; i < this.skuList.length; i++) {
                if (index == i) {
                    this.skuList[i].skuitem = newskuitm;
                }
            }
        },
        //删除规格名
        delSpec(indexs, skuitem) {
            var newskuitm = skuitem;
            newskuitm.splice(indexs, 1);
            for (let i = 0; i < this.skuList.length; i++) {
                if (indexs == i) {
                    this.skuList[i].skuitem = newskuitm;
                }
            }
        },
        //生成价格列表
        getPricelist() {
            var ayy = [];

            for (let i = 0; i < this.skuList.length; i++) {
                var temp_p = [];
                for (let j = 0; j < this.skuList[i].skuitem.length; j++) {
                    if (ayy.length == 0) {
                        temp_p.push(this.skuList[i].skuitem[j].name);
                    } else {
                        for (var t = 0; t < ayy.length; t++) {
                            temp_p.push(ayy[t] + "," + this.skuList[i].skuitem[j].name);
                        }
                    }
                }
                ayy = temp_p;
            }

            this.last(ayy);
        },
        async last(ayy) {
            const add = {
                temp: [],
            };

            const newList = ayy.map((v, i) => {
                return {
                    temp: v.split(","),
                    price: "",
                    kuc: "",
                    weigh: "",
                    market_price: "",
                    score: "",
                    sn: "",
                };
            });

            this.PricList = newList;
        },
        //上传图片--封面
        uplistImg() {
            if (this.imgs == "") {
                uni.chooseImage({
                    count: 1,
                    success: async (res) => {
                        uni.request({
                            url: "/wanlshop/common/uploadData",
                            success: (updata) => {
                                uni.uploadFile({
                                    url: updata.data.uploadurl,
                                    filePath: res.tempFilePaths[0],
                                    formData: updata.data.storage == "local" ? null : updata.data.multipart, // 1.0.5升级
                                    header: { token: this.$store.state.user.token },
                                    name: "file",
                                    success: (data) => {
                                        this.imgs = JSON.parse(data.data).data.fullurl;
                                        this.image = JSON.parse(data.data).data.url;
                                    },
                                });
                            },
                        });
                    },
                });
            } else {
                uni.showToast({
                    title: "只能上传一张封面图片",
                    icon: "none",
                });
            }
        },
        //上传图片
        upshopImg() {
            uni.chooseImage({
                count: 1,
                success: async (res) => {
                    uni.request({
                        url: "/wanlshop/common/uploadData",
                        success: (updata) => {
                            uni.uploadFile({
                                url: updata.data.uploadurl,
                                filePath: res.tempFilePaths[0],
                                formData: updata.data.storage == "local" ? null : updata.data.multipart, // 1.0.5升级
                                header: { token: this.$store.state.user.token },
                                name: "file",
                                success: (data) => {
                                    this.imgUpLoad.push(JSON.parse(data.data).data.fullurl);
                                    this.imagesUp.push(JSON.parse(data.data).data.url);
                                    this.image = this.imagesUp[0];
                                },
                            });
                        },
                    });
                },
            });
        },
        getSubmit() {
            uni.request({
                url: "/shop.shop/EditGoods",
                method: "POST",
                data: {
                    id: this.id,
                    title: this.title, //标题
                    category_id: this.yijiId, //一级分类
                    image: this.image, //图片封面
                    images: this.imagesUp, //轮播图
                    freight_id: this.postageid, //运费模板
                    spu: this.skuList, //规格
                    sku: this.PricList, //价格
                    content: this.content, //详情
                    shop_category_id: this.fenleiId, //商户内分类
                    brand_id: this.brandId, //品牌
                    delivery_type: this.distributionId, //配送类型
                },
                success: (res) => {
                    uni.showToast({
                        title: "商品提交成功",
                        //将值设置为 success 或者直接不用写icon这个参数
                        icon: "none",
                        //显示持续时间为 2秒
                        duration: 3000,
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1000);
                },
                fail: (res) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
/* 多规格 */
.wrap {
    width: 100%;
    padding: 20rpx;
    overflow: hidden;

    .wrap-list {
        margin: 20rpx auto;
        width: 700rpx;
        background-color: white;
        overflow: hidden;
        border-radius: 20rpx;

        .item {
            padding: 20rpx;
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            overflow: hidden;
        }

        .top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            input {
                text-align: left;
            }

            .delete {
                font-size: 28rpx;
                color: #333;
            }
        }

        .sku-list {
            margin-top: 20rpx;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .sku-item {
                width: 200rpx;
                height: 100rpx;
                margin-bottom: 30rpx;

                input {
                    text-align: left;
                }
            }
        }

        .add {
            width: 200rpx;
            height: 50rpx;
            border: 2rpx solid #00a67a;
            padding: 10rpx 20rpx;
            color: #00a67a;
        }
    }

    .input {
        flex: 1;
        height: 60rpx;
    }

    .wrap-btn {
        margin: 20rpx auto;
        width: 400rpx;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        background-color: green;
        border-radius: 50rpx;
        overflow: hidden;
        color: white;
        font-size: 32rpx;
    }
}

/* //旧的 */
page {
    width: 100%;
    padding: 0 33rpx;
    box-sizing: border-box;
}

.home {
    width: 100%;
    min-height: 100vh;
    padding-top: 30rpx;
}

.top {
    padding: 30rpx 0;

    .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
    }

    .radius {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 10rpx;
        border: 1rpx solid #888;
    }

    .rad_css {
        background: #606dce;
        border: 1rpx solid #606dce;
    }

    .grey {
        color: #333;
        font-size: 28rpx;
    }
}

.it_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item_pad_bot {
    padding-bottom: 10rpx !important;
}

.item {
    padding: 32rpx 30rpx;
    background: #fff;
    font-size: 28rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;

    .it_left {
        font-weight: bold;
        color: #222;
    }

    input {
        font-size: 28rpx;
        text-align: right;
    }

    .it_right {
        display: flex;
        align-items: center;

        text {
            color: #222;
        }

        .it_lef_img {
            width: 10rpx;
            height: 20rpx;
            margin-left: 10rpx;
        }

        .it_rig_img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }

        .it_rig_box {
            width: 220rpx;
            height: 220rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
            background: #f7f7f7;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #c9c9c9;
            font-size: 84rpx;

            image {
                width: 60rpx;
                height: 60rpx;
            }
        }
    }

    .it_right_duo {
        border-bottom: 1rpx solid #dfdfdf;

        &:last-child {
            border: none;
        }
    }

    .it_tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        margin-bottom: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .it_grey {
            font-size: 28rpx;
            color: #888;

            image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }

        input {
            font-size: 28rpx;
            font-weight: bold;
            text-align: left;
        }
    }

    .it_specs {
        color: #222;
        display: flex;
        font-size: 24rpx;
        align-items: center;
        padding: 10rpx 40rpx;
        background: #f5f5f5;
        border-radius: 26rpx;
        margin-right: 30rpx;
        margin-bottom: 20rpx;

        .it_sp_line {
            width: 2rpx;
            height: 24rpx;
            margin: 0 20rpx 0 24rpx;
        }

        .it_sp_cha {
            width: 20rpx;
            height: 20rpx;
        }

        .it_sp_plus {
            width: 20rpx;
            height: 20rpx;
            margin-right: 20rpx;
        }

        .it_sp_gre {
            color: #606dce;
        }
    }

    .it_specs input {
        flex: 1;
        max-width: 60rpx;
    }

    .it_pri {
        font-size: 24rpx;
        color: #222;
        padding: 10rpx 48rpx;
        background: #f5f5f5;
        margin-right: 30rpx;
    }

    .it_ban {
        width: 50%;
        padding: 30rpx 0;

        input {
            flex: 1;
            text-align: left;
            margin-left: 20rpx;
        }
    }
}

.btn {
    width: 630rpx;
    height: 80rpx;
    margin-top: 157rpx;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.layer-content {}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.scimg {
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
}

.textarea {
    height: 80rpx;
}

.add {
    width: 200rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(135deg, #ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}

.add1 {
    width: 80%;
    height: 80rpx;
    font-size: 28rpx;
    color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    background: linear-gradient(#ff4950 0, #ff8123 100%);
    border-radius: 40rpx;
}

.u-flex-wrap {
    flex-wrap: wrap;
}
</style>
